<template>
  <div class="add_address">
      <div class="content">
          <div>收货人</div>
          <input type="text" v-model="name">
      </div>
      <div class="content">
          <div>手机号码</div>
          <input type="text" v-model="phone" @blur="phoneNumber(phone)" maxlength="11">
      </div>
      <div class="content" style="height:100rpx">
          <div>所在区域</div>
          <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
            <view class="picker">
             {{region[0]}} {{region[1]}} {{region[2]}}
            </view>
          </picker>
      </div>
      <div class="detailed">
          <div class="title">详细地址：</div>
          <textarea name="" placeholder="如道路、门牌号、小区、楼栋号、单元室等"></textarea>
      </div>
      <div class="default">
          <div class="default_title">设为默认地址</div>
          <switch :checked="checked" @change="onChange" color="#FF3D4F"/>
      </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
        name:'',  //名字
        phone:'', //电话
        region:[],  //地址
        checked:false,
        default:0,  //默认地址参数
    }
  },
  methods: {
      bindRegionChange(e){
        this.region=e.mp.detail.value
        console.log(e.mp.detail.code)  //区域代码
      },
      phoneNumber(value) {
        if (value && (!(/^[1][34578]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
          
          // callback(new Error('手机号码不符合规范'))
        } else {
          // callback()
          console.log('2222')
        }
      },
      onChange(e) {
        console.log(e)
        var that = this
        if( that.checked ==false){
           wx.showToast({
              title: '设为默认成功',
              icon: 'success',
              duration:1000,
              success:function (res) {
                console.log(res)
                that.checked =true
              }
           })  
        }else{
            wx.showToast({
                title: '取消默认成功',
                icon: 'success',
                duration:1000,
                success:function (res) {
                  console.log(res)
                  that.checked =false
                }
            })  
        }
      }
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style lang="less">
html{
  background: #f5f5f5;
}
    .add_address{
      padding-top: 20rpx;
      box-sizing: border-box;
      .content{
        width: 100%;
        height: 90rpx;
        border-bottom: 2rpx solid #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        box-sizing: border-box;
        color: #000;
        font-size: 28rpx;
        background:#fff;
        div{
          color: #999;
        }
        input{
          width: 516rpx;
          height: 90rpx;
          line-height: 90rpx;

        }
        .picker{
          width: 516rpx;
          height: 90rpx;
          line-height: 90rpx;
        }
      }
      .detailed{
        width: 100%;
        height: 198rpx;
        padding: 0rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        display: flex;
        align-items: flex-start;
        font-size: 26rpx;
        color: #999;
        background: #fff;
        div{
          padding-top: 28rpx;
          box-sizing: border-box;
          white-space: nowrap
          
        }
        textarea{
          padding-top: 14rpx;
          box-sizing: border-box;
          height: 140rpx;

        }
      }
      .default{
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        box-sizing: border-box;
        color: #000;
        font-weight:500;
        font-size: 28rpx;
        background:#fff;
        margin-top: 20rpx;
        
      }
    }
 
</style>
